<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件详情 - 向量库操作系统</title>
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <header>
        <h1>向量库操作系统</h1>
        <p>文件管理、向量库和检索系统</p>
    </header>
    
    <nav class="navbar">
        <a href="/">首页</a>
        <a href="/files" class="active">文件管理</a>
        <a href="/search">内容检索</a>
        <a href="/stats">系统统计</a>
        <a href="/docs">API文档</a>
    </nav>
    
    <div class="container">
        <div class="card">
            <div class="card-header">
                <h2>文件详情</h2>
            </div>
            <div id="file-detail">
                <!-- 文件详情将在这里显示 -->
                <p>加载中...</p>
            </div>
        </div>
        
        <div class="card">
            <div class="card-header">
                <h2>向量块信息</h2>
            </div>
            <div id="chunk-info">
                <!-- 向量块信息将在这里显示 -->
                <p>加载中...</p>
            </div>
        </div>
    </div>
    
    <script src="/static/js/main.js"></script>
    <script>
        // 获取URL参数
        function getUrlParameter(name) {
            name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
            var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
            var results = regex.exec(window.location.search);
            return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
        }
        
        // 页面加载完成后获取文件详情
        document.addEventListener('DOMContentLoaded', function() {
            const fileId = getUrlParameter('file_id');
            if (fileId) {
                loadFileDetail(fileId);
            }
        });
        
        // 加载文件详情
        function loadFileDetail(fileId) {
            fetch(`/api/v1/files/${fileId}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success && data.file_detail) {
                        renderFileDetail(data.file_detail);
                    } else {
                        document.getElementById('file-detail').innerHTML = '<p>加载文件详情失败</p>';
                    }
                })
                .catch(error => {
                    console.error('加载文件详情失败:', error);
                    document.getElementById('file-detail').innerHTML = '<p>加载文件详情失败: ' + error.message + '</p>';
                });
        }
        
        // 渲染文件详情
        function renderFileDetail(fileDetail) {
            const fileDetailContainer = document.getElementById('file-detail');
            if (!fileDetailContainer) return;
            
            const fileInfo = fileDetail.file_info;
            const chunks = fileDetail.chunks || [];
            
            let html = `
                <div class="file-info">
                    <h3>${fileInfo.filename}</h3>
                    <table class="file-detail-table">
                        <tr>
                            <td><strong>文件ID:</strong></td>
                            <td>${fileInfo.file_id}</td>
                        </tr>
                        <tr>
                            <td><strong>文件大小:</strong></td>
                            <td>${formatFileSize(fileInfo.file_size)}</td>
                        </tr>
                        <tr>
                            <td><strong>文件类型:</strong></td>
                            <td>${fileInfo.file_type}</td>
                        </tr>
                        <tr>
                            <td><strong>状态:</strong></td>
                            <td>${fileInfo.status}</td>
                        </tr>
                        <tr>
                            <td><strong>块数量:</strong></td>
                            <td>${fileInfo.chunk_count}</td>
                        </tr>
                        <tr>
                            <td><strong>向量数量:</strong></td>
                            <td>${fileInfo.vector_count}</td>
                        </tr>
                        <tr>
                            <td><strong>上传时间:</strong></td>
                            <td>${fileInfo.upload_time || '未知'}</td>
                        </tr>
                        <tr>
                            <td><strong>处理时间:</strong></td>
                            <td>${fileInfo.process_time || '未知'}</td>
                        </tr>
                    </table>
                </div>
            `;
            
            fileDetailContainer.innerHTML = html;
            
            // 渲染向量块信息
            renderChunkInfo(chunks);
        }
        
        // 渲染向量块信息
        function renderChunkInfo(chunks) {
            const chunkInfoContainer = document.getElementById('chunk-info');
            if (!chunkInfoContainer) return;
            
            if (chunks.length === 0) {
                chunkInfoContainer.innerHTML = '<p>该文件没有向量块信息</p>';
                return;
            }
            
            let html = `
                <div class="chunk-list">
                    <h3>向量块列表 (${chunks.length} 个块)</h3>
                    <div class="chunk-items">
            `;
            
            chunks.forEach((chunk, index) => {
                html += `
                    <div class="chunk-item">
                        <h4>块 #${index + 1}</h4>
                        <div class="chunk-content">
                            <p><strong>块ID:</strong> ${chunk.chunk_id}</p>
                            <p><strong>块索引:</strong> ${chunk.chunk_index}</p>
                            <p><strong>内容预览:</strong></p>
                            <div class="content-preview">${chunk.content}</div>
                            <p><strong>元数据:</strong> ${JSON.stringify(chunk.metadata || {})}</p>
                            <p><strong>创建时间:</strong> ${new Date(chunk.created_time * 1000).toLocaleString()}</p>
                        </div>
                    </div>
                `;
            });
            
            html += `
                    </div>
                </div>
            `;
            
            chunkInfoContainer.innerHTML = html;
        }
        
        // 格式化文件大小
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }
    </script>
</body>
</html>